<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SKECHERS注册</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="common.css">
    <style>
        .content {
            height: 1282px;
            /* background: #1d6dc4; */
        }
        
        .content-con {
            /* height: 1472px; */
            background: #fff;
            margin: 0 auto;
            width: 87%;
            padding: 39px 0 50px 74px;
            box-sizing: border-box;
        }
        
        .contentL {
            height: 1192px;
            /* background: cadetblue; */
            border-right: 1px solid #333333;
            width: 43%;
            padding-top: 40px;
            box-sizing: border-box;
            float: left;
        }
        
        .contentL .status {
            margin-bottom: 32px;
        }
        
        .contentL .status img {
            float: left;
            margin-right: 18px;
        }
        
        .contentL .status span {
            line-height: 29px;
            font-size: 19px;
            color: #333333;
        }
        
        .contentL .status span a {
            text-decoration: underline;
            color: #0065b4;
        }
        
        .contentL .number {
            width: 163px;
            height: 41px;
            text-align: center;
            color: white;
            background: #002952;
            line-height: 39px;
            display: inline-block;
            cursor: pointer;
        }
        
        .seeopen {
            width: 40px;
            height: 45px;
            display: inline-block;
            position: absolute;
            right: 105px;
            top: 8px;
        }
        
        .submit {
            width: 93px;
            height: 39px;
            background: #002952;
            line-height: 39px;
            text-align: center;
            color: #666666;
            font-size: 20px;
            cursor: pointer;
            margin-left: 30%;
            margin-bottom: 65px;
            border-radius: 5px;
        }
        
        .contentL .text {
            width: 81%;
            height: 36px;
            border: 3px solid #808080;
        }
        
        .contentL input {
            margin-bottom: 32px;
            text-indent: 6px;
        }
        
        .contentL .retext {
            width: 50%;
            height: 36px;
            border: 3px solid #808080;
        }
        
        .contentL p a {
            text-decoration: underline;
            color: #777777;
        }
        
        #checkboy,
        #checkgirl {
            font-size: 18px;
            width: 15px;
            height: 15px;
            margin-right: 7px;
        }
        
        .contentL i {
            font-style: normal;
            font-size: 12px;
        }
        
        #sel1,
        #sel2,
        #sel3 {
            width: 143px;
            height: 36px;
            border: 3px solid #808080;
        }
        
        #repassword {
            margin-bottom: 13px;
        }
        
        .contentL b {
            display: block;
            color: #333333;
            font-weight: normal;
            text-align: center;
        }
        
        .method {
            text-align: center;
            /* background: orange; */
            margin-top: 28px;
            margin-bottom: 58px;
        }
        
        .method span {
            margin-right: 16px;
        }
        
        .method span:nth-of-type(1) {
            width: 46px;
            height: 46px;
            background: url(img/spritesheet.png) no-repeat -393px -74px;
            /* background-color: pink; */
            display: inline-block;
        }
        
        .method span:nth-of-type(2) {
            width: 46px;
            height: 46px;
            background: url(img/spritesheet.png) no-repeat -392px -137px;
            /* background-color: pink; */
            display: inline-block;
        }
        
        .method span:nth-of-type(3) {
            width: 46px;
            height: 46px;
            background: url(img/spritesheet.png) no-repeat -392px -195px;
            /* background-color: pink; */
            display: inline-block;
        }
        
        .orvip {
            width: 400px;
            height: 39px;
            /* background: chartreuse; */
        }
        
        .orvip em {
            font-style: normal;
            font-size: 17px;
            float: left;
            line-height: 39px;
        }
        
        .orvip .center {
            width: 118px;
            height: 39px;
            background: #002952;
            text-align: center;
            line-height: 39px;
            color: white;
            font-size: 20px;
            border-radius: 5px;
            float: right;
            cursor: pointer;
        }
        
        .contentR {
            float: left;
            width: 57%;
        }
        
        .contentR img {
            margin-left: 98px;
            margin-top: 51px;
            cursor: pointer;
        }
        
        .contentL .typefast {
            width: 407px;
        }
    </style>
</head>

<body>
    <div class="top">
        <div class="top-left">
            <img src="img/logo.png" alt="" class="SKECHER" style="cursor: pointer;">
            <ul class="top-list">
                <li class="man">男子</li>
                <li class="woman">女子</li>
                <li class="children">儿童</li>
                <li class="newgood">新品抢鲜</li>
                <li class="type">系列</li>
                <li class="common">明星同款</li>
            </ul>
        </div>
        <div class="top-right">
            <div class="right-search">
                <input type="text" name="" id="search" placeholder="搜索">
                <div class="search-con"></div>
            </div>
            <div class="top-login">
                <div class="login-icon"></div>
                <span class="login"> <span class="gocenter">登录</span> |<span class="trycenter">注册</span></span>
            </div>
            <div class="top-shop">
                <div class="shop-icon">
                    <div class="red-con">0</div>
                </div>
                <span class="shop">购物车</span>
            </div>

        </div>
    </div>
    <div class="top-banner1" id="template">
        <div class="banner-left">
            <div class="left">
                <p>最新活动</p>
                <ul>
                    <li>最新上市</li>
                    <li>BARREL合作款</li>
                    <li>JEREMYVILLE联名款</li>
                </ul>
            </div>
            <div class="middle">
                <p>鞋类</p>
                <ul>
                    <li>时尚运动鞋</li>
                    <li>休闲运动鞋</li>
                    <li>跑步鞋</li>
                    <li>健步鞋</li>
                    <li>休闲鞋</li>
                    <li>凉鞋</li>
                </ul>
            </div>
            <div class="right">
                <p>服饰</p>
                <ul>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>上衣/T恤</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>
        </div>
        <div class="banner-right">
            <p>精选系列</p>
            <img src="img/1l.jpg" alt="">
            <a href="" style="color:#474747">查看详情 &gt;</a>
        </div>
    </div>
    <div class="top-banner2" id="template">
        <div class="banner-left">
            <div class="left">
                <p>最新活动</p>
                <ul>
                    <li>最新上市</li>
                    <li>美少女联名款</li>
                    <li>吾皇联名款</li>
                    <li>FELIX猫联名款</li>
                    <li>横冲直撞20岁</li>
                    <li>BARREL合作款</li>
                    <li>HELLOKITTY联名款</li>
                    <li>JEREMYVILLE联名款</li>
                    <li>RICOSTRU联名款</li>
                </ul>
            </div>
            <div class="middle">
                <p>鞋类</p>
                <ul>
                    <li>时尚运动鞋</li>
                    <li>休闲运动鞋</li>
                    <li>跑步鞋</li>
                    <li>健步鞋</li>
                    <li>休闲鞋</li>
                    <li>凉鞋</li>
                </ul>
            </div>
            <div class="right">
                <p>服饰</p>
                <ul>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>运动内衣</li>
                    <li>上衣/T恤</li>
                    <li>连衣裙/半身裙</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>
        </div>
        <div class="banner-right">
            <p>精选系列</p>
            <img src="img/2l.jpg" alt="">
            <a href="" style="color:#474747">查看详情 &gt;</a>
        </div>
    </div>
    <div class="top-banner3" id="template">
        <div class="banner-left">
            <div class="left">
                <p>最新活动</p>
                <ul>
                    <li>最新上市</li>
                    <li>汪汪队</li>
                </ul>
            </div>
            <div class="middle">
                <p>男童</p>
                <ul>
                    <li>运动鞋</li>
                    <li>休闲鞋</li>
                    <li>闪灯鞋</li>
                    <li>凉鞋</li>
                    <li>上衣/T恤</li>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>
            <div class="right">
                <p>女童</p>
                <ul>
                    <li>运动鞋</li>
                    <li>休闲鞋</li>
                    <li>闪灯鞋</li>
                    <li>凉鞋</li>
                    <li>上衣/T恤</li>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>连衣裙/半身裙</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>

        </div>
        <div class="banner-right">
            <p>精选系列</p>
            <img src="img/3l.jpg" alt="">
            <a href="" style="color:#474747">查看详情 &gt;</a>
        </div>
    </div>
    <div class="top-banner4" id="template">
        <div class="bannertype">
            <dl>
                <dt>
                    <img src="img/mp1.jpg" alt="">
                </dt>
                <dd>D'LITES系列 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp2.jpg" alt=""></dt>
                <dd>MARK NASON系列 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp3.jpg" alt=""></dt>
                <dd>ON THE GO系列 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp4.jpg" alt=""></dt>
                <dd>GO RUN系列&gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp5.jpg" alt=""></dt>
                <dd>BOBS系列 &gt;</dd>
            </dl>
        </div>
        <a href="" class="more">查看更多系列 &gt;</a>
    </div>
    <div class="top-banner5" id="template">
        <div class="bannertype">
            <dl>
                <dt>
                    <img src="img/star4.jpg" alt="">
                </dt>
                <dd>唐嫣 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/star3.jpg" alt=""></dt>
                <dd>吴尊&gt;</dd>
            </dl>
        </div>
    </div>
    <!-- 注册 -->
    <div class="content">
        <div class="content-con">
            <div class="contentL">
                <p class="status">
                    <img src="img/club.png" alt="">
                    <span>如您已通过斯凯奇微信公众号注册S-CLUB，<br>无需注册，<a href="login.html" >点击这里</a>，可直接登录购物。</span>
                </p>
                <table class="tablesubmit">
                    <p>
                        <input type="text" placeholder="姓名*" id="name" class="text">
                    </p>
                    <p>
                        <label>
                      <input type="radio" name="sex" id="checkboy">男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </label>
                        <label>
                        <input type="radio" name="sex" id="checkgirl">女
                      </label>
                    </p>

                    <i>生日</i>
                    <p>
                        <select name="sel1" id="sel1">
                            <option value="year">年</option>
                        </select>
                        <select name="sel2" id="sel2">
                            <option value="month">月</option>
                        </select>
                        <select name="sel3" id="sel3">
                            <option value="day">日</option>
                        </select>
                    </p>
                    <em style="color: #e53935;font-size: 13px;font-style: normal;display: inline-block;margin-bottom: 34px;">填写生日将会获得生日礼券</em>
                    <p><input type="text" placeholder="手机号码*" class="text" id="phonenum"></p>
                    <p><input type="text" placeholder="手机验证码*" class="retext">
                        <span class="number">获取验证码</span>
                    </p>
                    <p style="position: relative;">
                        <input type="password" id="password" placeholder="密码*" class="text"><span class="seeopen"><img src="img/eye.png" alt=""></span>
                    </p>
                    <p>
                        <input type="password" id="repassword" placeholder="确认密码*" class="text">
                    </p>
                    <p>*为必填项，请留意。</p>
                    <br>
                    <br>
                    <p><input type="checkbox" style="margin-bottom: 0;" class="agree1">我已阅读并同意<a href="#">斯凯奇平台服务协议，<br>隐私保护条款&nbsp;&nbsp;儿童个人信息保护专用条款</a></p><br>
                    <p><input type="checkbox" class="agree2">本人属于14周岁以上用户</p>
                </table>
                <button class="submit">注册</button>
                <div class="typefast">
                    <b>或通过以下方式快速登录:</b>
                    <div class="method">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <div class="orvip">
                    <em>已是斯凯奇会员？</em>
                    <button class="center">登录</button>
                </div>
            </div>
            <div class="contentR">
                <img src="img/640.jpg" alt="">
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="bottom">
        <div class="btop">
            <div class="top-list">
                <span><i>会员</i></span>
                <span><i>门店</i></span>
            </div>
        </div>
        <div class="middle">
            <div class="copy">
                <span>我们的支付方式&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <img src="img/wechatpay_pc.png" alt="" >&nbsp;&nbsp;
                <img src="img/alipay_pc.png" alt="">&nbsp;&nbsp;
                <img src="img/unionpay_pc.png" alt="">&nbsp;&nbsp;
            </span>
            </div>
            <div class="china"><img src="img/cn.png" alt="">&nbsp;&nbsp;中国</div>
        </div>
        <div class="lastmessage">
            <div class="lastL">
                <ul>
                    <b>联系客服</b>
                    <li>团购申请</li>
                    <li>在线客服</li>
                    <li>网站地图</li>
                </ul>
                <ul>
                    <b>我的账户</b>
                    <li>会员权利</li>
                    <li>我的信息</li>
                    <li>我的订单</li>
                    <li>我的积分</li>
                    <li>我的优惠券</li>
                    <li>收件地址</li>
                </ul>
                <ul>
                    <b>帮助中心</b>
                    <li>订单异常</li>
                    <li>发票</li>
                    <li>支付方式</li>
                    <li>退货说明</li>
                    <li>找回密码</li>
                    <li>注册与登录</li>
                </ul>
                <ul>
                    <b>关于斯凯奇</b>
                    <li>斯凯奇故事</li>
                    <li>联系我们</li>
                    <li>免责声明</li>
                    <li>隐私保护</li>
                    <li>服务协议</li>
                    <li>投资关系</li>
                    <li>招贤纳士</li>
                </ul>
            </div>
            <div class="lastR">
                <b>关注我们</b>
                <p class="wechat"><img src="img/weibo.png" alt=""><img src="img/wechat.png" alt="">
                    <img src="img/QRCode.jpg" alt="" class="code" id="template"></p>
                <i>获取斯凯奇最新资讯</i>
                <div class="email"> <input type="email"> <em></em></div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer-con">
            <div class="footL">
                <p>广州市利德丹贸易有限公司保留所有权利</p>
                <p><span style="color:#002b57">粤ICP备12085615号-1 </span>&copy; 2018 SKECHERS,INC</p>
            </div>
            <div class="footR">
                <img src="img/pc_kx.png" alt="">
                <img src="img/pc_cx.png" alt="">
                <img src="img/pc_ga.png" alt="">
                <img src="img/pc_zzN.png" alt="">
            </div>
            <!-- <div class="gotop"><img src="img/btn-gotop.png" alt=""></div> -->
        </div>

    </div>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/common.js"></script>
    <script>
        //年月日下拉列表
        //生成日期
        function creatDate() {
            //生成1920年-2020年
            for (var i = 1910; i <= 2020; i++) {
                var option = document.createElement('option');
                option.setAttribute('value', i);
                option.innerHTML = i;
                sel1.appendChild(option);
            }
            //生成1月-12月
            for (var i = 1; i <= 12; i++) {
                var option = document.createElement('option');
                option.setAttribute('value', i);
                option.innerHTML = i;
                sel2.appendChild(option);
            }
            //生成1日—31日
            for (var i = 1; i <= 31; i++) {
                var option = document.createElement('option');
                option.setAttribute('value', i);
                option.innerHTML = i;
                sel3.appendChild(option);
            }
        }
        creatDate();
        //保存某年某月的天数
        var days;
        //年份点击
        sel1.onclick = function() {
                //月份显示默认值
                sel2.options[0].selected = true;
                //天数显示默认值
                sel3.options[0].selected = true;
            }
            //月份点击
        sel2.onclick = function() {
            //天数显示默认值
            sel3.options[0].selected = true;
            //计算天数的显示范围
            //如果是2月
            if (sel2.value == 2) {
                //如果是闰年
                if ((sel1.value % 4 === 0 && sel1.value % 100 !== 0) || sel1.value % 400 === 0) {
                    days = 29;
                    //如果是平年
                } else {
                    days = 28;
                }
                //如果是第4、6、9、11月
            } else if (sel2.value == 4 || sel2.value == 6 || sel2.value == 9 || sel2.value == 11) {
                days = 30;
            } else {
                days = 31;
            }
            //增加或删除天数
            //如果是28天，则删除29、30、31天(即使他们不存在也不报错)
            if (days == 28) {
                sel3.remove(31);
                sel3.remove(30);
                sel3.remove(29);
            }
            //如果是29天
            if (days == 29) {
                sel3.remove(31);
                sel3.remove(30);
                //如果第29天不存在，则添加第29天
                if (!sel3.options[29]) {
                    sel3.add(new Option('29', '29'), undefined)
                }
            }
            //如果是30天
            if (days == 30) {
                sel3.remove(31);
                //如果第29天不存在，则添加第29天
                if (!sel3.options[29]) {
                    sel3.add(new Option('29', '29'), undefined)
                }
                //如果第30天不存在，则添加第30天
                if (!sel3.options[30]) {
                    sel3.add(new Option('30', '30'), undefined)
                }
            }
            //如果是31天
            if (days == 31) {
                //如果第29天不存在，则添加第29天
                if (!sel3.options[29]) {
                    sel3.add(new Option('29', '29'), undefined)
                }
                //如果第30天不存在，则添加第30天
                if (!sel3.options[30]) {
                    sel3.add(new Option('30', '30'), undefined)
                }
                //如果第31天不存在，则添加第31天
                if (!sel3.options[31]) {
                    sel3.add(new Option('31', '31'), undefined)
                }
            }
        }
        $(".center").click(function() {
                location.href = `${address}/login.html`
            })
            //登录注册链接地址

        $(".gocenter").click(function() {
            location.href = `${address}/login.html`
        })
        $(".trycenter").click(function() {
            location.href = `${address}/register.html`
        })

        //表单验证
        // 姓名
        let name = document.getElementById("name")
        name.onblur = function() {
            let text = name.value
            if (text == "") {
                this.setAttribute("placeholder", "必填字段")
                this.style.border = "2px solid red"
                    // placeholder.style.color = "red"
            } else {
                this.style.border = "2px solid green"
            }
        }
        let phonenumber = document.getElementById("phonenum")

        phonenumber.onblur = function() {
            let text = phonenumber.value
            let reg = /^(\+86)?1\d{10}$/;
            if (reg.test(text)) {
                this.style.border = "2px solid green"

            } else {
                phonenumber.value = ""
                this.setAttribute("placeholder", "请输入一个有效的电话号码.")
                this.style.border = "2px solid red"
            }
            if (text == "") {
                this.setAttribute("placeholder", "必填字段")
                this.style.border = "2px solid red"
            }
        }
        let passnumber = document.getElementsByClassName("retext")[0]
        passnumber.onblur = function() {
            let text = passnumber.value
            if (text == "" || text.length > 4) {
                this.value = ""
                this.setAttribute("placeholder", "输入字符不得超过四个。")
                this.style.border = "2px solid red"
            }
            if (this.value === this.parentNode.querySelectorAll('.number')[0].innerHTML) {
                this.style.border = "2px solid green"
            }
        }
        let number = document.querySelectorAll(".number")[0]
        number.onclick = function() {
            number.innerHTML = changenumber()
            if (this.parentNode.querySelectorAll('.retext')[0].value.length === 4) {
                number.innerHTML = "获取验证码"
            }

        }

        function changenumber() {
            var str = ""
            var arr = ["1", "2", "3", "4", "5", "6", "a", "d", "c"]
            for (i = 0; i < 4; i++) {
                var num = parseInt(Math.random() * arr.length)
                str += arr[num]
            }
            return str;
        }
        let password = document.getElementById("password")
        let seeopen = document.getElementsByClassName("seeopen")[0]
        password.onblur = function() {
            let text = password.value
            if (text == "") {
                this.setAttribute("placeholder", "必填字段。")
                this.style.border = "2px solid red"
            }
            seeopen.onclick = () => {
                if (this.getAttribute("type") == "password") {
                    this.setAttribute("type", "text")
                } else {
                    this.setAttribute("type", "password")
                }
            }
            if (text.length < 6) {
                this.setAttribute("placeholder", "密码不少于六位。")
                this.style.border = "2px solid red"
                this.value = ""
            } else {
                this.style.border = "2px solid green"
            }
        }
        let repassword = document.getElementById("repassword")
        repassword.onblur = function() {
            let text = repassword.value
            if (text == "") {
                this.setAttribute("placeholder", "必填字段。")
                this.style.border = "2px solid red"
            } else {
                if (this.value != this.parentNode.parentNode.querySelectorAll('#password')[0].value) {
                    this.setAttribute("placeholder", "两次密码输入不一致。")
                    this.style.border = "2px solid red"
                    this.value = ""
                } else {
                    this.style.border = "2px solid green"
                }
            }
        }
        let agree1 = document.querySelectorAll(".agree1")[0]
        let agree2 = document.querySelectorAll(".agree2")[0]
        let submit = document.querySelectorAll(".submit")[0]

        submit.onclick = function() {
            if (name.value && password.value && repassword.value && phonenumber.value && passnumber.value && agree1.checked && agree2.checked) {
                $.ajax({
                    url: `${address}/adduser`,
                    data: {
                        name: name.value,
                        password: password.value,
                        phonenumber: phonenumber.value,
                        passnumber: passnumber.value
                    },
                    success(data) {
                        if (phonenumber.value = data.phonenumber) {
                            alert("该用户已注册，请直接登录")
                        }
                        if (data === "error") {
                            alert("注册失败")
                        } else {
                            alert("您已注册成功")
                            location.href = `${address}/login.html`
                        }
                    }
                })
            } else {
                alert("请补全信息")
            }
        }


        agree1.onclick = function() {
            if (this.checked) {
                agree2.onclick = function() {
                    if (this.checked) {
                        submit.style.color = "white"
                    }
                }
            } else {
                submit.style.color = "#666"
            }
        }
        agree2.onclick = function() {
            if (this.checked) {
                agree1.onclick = function() {
                    if (this.checked) {
                        submit.style.color = "white"
                    }
                }
            } else {
                submit.style.color = "#666"
            }
        }
    </script>
</body>

</html>